<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.custom.97074.js"></script>
<script src="js/me.js"></script>
<body>
    <div id="Home"></div>
    <header>
        <div id="header_bg">
            <h1>RECOLLECT</h1>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Portfolio</li>
                <li>Services</li>
                <li>Contact</li>
            </ul>
        </div>
    </header>
    <section>
        <div id="About" style="background:#76b852;color:#fff;">

            <div class="about_top">
                <h1>About Me</h1>
                <h3>Who I am and why I design</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur deleniti dignissimos dolor dolorem ea ex ipsam ipsum laudantium,
                    libero maxime molestiae natus officia omnis perspiciatis reprehenderit repudiandae sapiente totam voluptatibus.</p>
            </div>
            <div class="about_bottom">
                <div class="left">
                    <h1>WHAT I DO AND MY EXPERIENCE</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci autem eius libero provident unde.
                        Autem commodi debitis dolore ducimus error illum natus, praesentium quaerat quam quod, rerum, ut vitae voluptatum. </p>
                </div>
                <div class="right">
                    <h1>MY GOALS</h1>
                    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequuntur cumque facere hic illo iure laudantium odio porro quasi veniam.
                        Doloremque ducimus impedit, odit perspiciatis quia sint ullam voluptatum! Delectus.</p>
                </div>
            </div>
        </div>
        <div id="skill" >
            <div class="skill_nav">
                <h1 style=" margin-top: 0px;">SKILL</h1>
            </div>
            <div class="skill_section">
                <div>
                    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="100" cy="100" r="80" stroke-width="20" stroke="#D1D3D7" fill="none"></circle>
                        <circle cx="100" cy="100" r="80" stroke-width="20" stroke="#000" fill="none" transform="matrix(0,-1,1,0,0,200)" stroke-dasharray="300 1000" ></circle>circle>
                        <text x="70" dy="115" style="fill: red">60%</text>
                    </svg>
                    <h1>webDesign</h1>
                </div>
                <div>
                    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="100" cy="100" r="80" stroke-width="20" stroke="#D1D3D7" fill="none"></circle>
                        <circle cx="100" cy="100" r="80" stroke-width="20" stroke="#000" fill="none" transform="matrix(0,-1,1,0,0,200)" stroke-dasharray="400 1000" >
                        </circle>
                        <text x="70" dy="115" style="fill: red">80%</text>
                    </svg>
                    <h1>HTML/Css</h1>
                </div>
                <div>
                    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="100" cy="100" r="80" stroke-width="20" stroke="#D1D3D7" fill="none"></circle>
                        <circle cx="100" cy="100" r="80" stroke-width="20" stroke="#000" fill="none" transform="matrix(0,-1,1,0,0,200)" stroke-dasharray="350 1000" ></circle>
                        <text x="70" dy="115" style="fill: red">70%</text>
                    </svg>
                    <h1>bootstrap</h1>
                </div>
                <div>
                    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="100" cy="100" r="80" stroke-width="20" stroke="#D1D3D7" fill="none"></circle>
                        <circle cx="100" cy="100" r="80" stroke-width="20" stroke="#000" fill="none" transform="matrix(0,-1,1,0,0,200)" stroke-dasharray="250 1000" ></circle>
                        <text x="70" dy="115" style="fill: red">50%</text>
                    </svg>
                    <h1>Jquery</h1>
                </div>
            </div>
        </div>
        <div id="Portfolio">
            <div class="container">
                <script src="js/jquery.chocolat.js"></script>
                <link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8"/>
                <!--light-box-files -->
                <h3>PORTFOLIO</h3>
            <ul id="da-thumbs" class="da-thumbs">
                <li>
                    <a href="images/a1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
                        <img src="images/a1.jpg" alt="" />
                        <div>
                            <h5>VIEW</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="images/a2.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
                        <img src="images/a2.jpg" alt="" />
                        <div>
                            <h5>VIEW</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="images/a3.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
                        <img src="images/a3.jpg" alt="" />
                        <div>
                            <h5>VIEW</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="images/a4.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
                        <img src="images/a4.jpg" alt="" />
                        <div>
                            <h5>VIEW</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="images/a5.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
                        <img src="images/a5.jpg" alt="" />
                        <div>
                            <h5>VIEW</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="images/a6.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
                        <img src="images/a6.jpg" alt="" />
                        <div>
                            <h5>VIEW</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="images/a7.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
                        <img src="images/a7.jpg" alt="" />
                        <div>
                            <h5>VIEW</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="images/a1.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
                        <img src="images/a1.jpg" alt="" />
                        <div>
                            <h5>VIEW</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="images/a2.jpg" rel="title" class="b-link-stripe b-animate-go  thickbox">
                        <img src="images/a2.jpg" alt="" />
                        <div>
                            <h5>VIEW</h5>
                        </div>
                    </a>
                </li>
                <div class="clearfix"> </div>
            </ul>
            </div>
        </div>
        <div id="Services">
            <div class="container">
                <div class="ser-head">
                    <h3>FEATURED SERVICES</h3>
                </div>
                <div class="wel-grids">
                    <div class="col-md-4 wel-grid text-center">
                        <div class="btm-clr">
                            <figure class="icon">
                                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                            </figure>
                            <h3>VOLUPTATEM</h3>
                            <p> Nemo enim ipsam voluptatem
                                quia voluptas sit aspernatur aut
                                odit aut fugi.</p>
                        </div>
                    </div>
                    <div class="col-md-4 wel-grid btm-gre text-center">
                        <div class="btm-clr">
                            <figure class="icon">
                                <span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
                            </figure>
                            <h3>VOLUPTATEM</h3>
                            <p> Nemo enim ipsam voluptatem
                                quia voluptas sit aspernatur aut
                                odit aut fugi.</p>
                        </div>
                    </div>
                    <div class="col-md-4 wel-grid text-center">
                        <div class="btm-clr">
                            <figure class="icon">
                                <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
                            </figure>
                            <h3>VOLUPTATEM</h3>
                            <p> Nemo enim ipsam voluptatem
                                quia voluptas sit aspernatur aut
                                odit aut fugi.</p>
                        </div>
                    </div>
                    <div class="col-md-4 wel-grid btm-gre text-center">
                        <div class="btm-clr">
                            <figure class="icon">
                                <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                            </figure>
                            <h3>VOLUPTATEM</h3>
                            <p> Nemo enim ipsam voluptatem
                                quia voluptas sit aspernatur aut
                                odit aut fugi.</p>
                        </div>
                    </div>
                    <div class="col-md-4 wel-grid text-center">
                        <div class="btm-clr">
                            <figure class="icon">
                                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                            </figure>
                            <h3>VOLUPTATEM</h3>
                            <p> Nemo enim ipsam voluptatem
                                quia voluptas sit aspernatur aut
                                odit aut fugi.</p>
                        </div>
                    </div>
                    <div class="col-md-4 wel-grid btm-gre text-center">
                        <div class="btm-clr">
                            <figure class="icon">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                            </figure>
                            <h3>VOLUPTATEM</h3>
                            <p> Nemo enim ipsam voluptatem
                                quia voluptas sit aspernatur aut
                                odit aut fugi.</p>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div id="Contact">
            <div class="contact_box">
                <div class="container">
                <div class="contact-grids">
                    <div class="col-md-4 contact-grid text-center">
                        <div class="point-icon"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span></div>
                        <p>shan xi tai yuan</p>
                    </div>
                    <div class="col-md-4 contact-grid text-center">
                        <div class="point-icon"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></div>
                        <p><a href="mailto:18201270583@163.com">18201270583@163.com</a></p>
                    </div>
                    <div class="col-md-4 contact-grid text-center">
                        <div class="point-icon"><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span></div>
                        <p>18201270583</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="contact-info">
                    <form>
                        <input type="text" placeholder="Your Name" required>
                        <input type="text" placeholder="Your E-Mail" required>
                        <input type="text" placeholder="Subject" required>
                        <textarea placeholder="Your Message" required></textarea>
                        <input type="submit" value="SEND MESSAGE">
                    </form>
                </div>
            </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            <p>Copyright © 2015.Company name All rights reserved.recall <a href="http:///" target="_blank" title="recall">忆</a> - Collect from </p>
        </div>
    </footer>
    <div id="top">
    </div>

    <script type="text/javascript" src="js/jquery.hoverdir.js"></script>
    <script type="text/javascript">
        $(function() {
            $(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );
            $("#top").on("click",function(){
                $("body,html").animate({scrollTop: $("#Home").offset().top}, 1000);
            })
        });
    </script>
</body>
</html>